<template>
  <div class="friends-container">
    <!-- 头部导航 -->
    <HomeHeader />
    
    <!-- 添加动态背景 -->
    <div class="animated-background">
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
    </div>
    
    <!-- 主要内容区 -->
    <div class="friends-content">
      <!-- 顶部信息区域 -->
      <div class="info-section">
        <h1>欢迎来到小张的个人博客</h1>
        <div class="blog-info">
          <div class="info-item">博客链接: http://mrzym.top/</div>
          <div class="info-item">QQ: 2715158815</div>
          <div class="info-item">快来申请小张的友链吧</div>
        </div>
        <el-button type="primary" class="apply-btn" @click="showApplyDialog">
          友链申请
        </el-button>
      </div>

      <!-- 友链卡片网格 -->
      <div class="friends-grid">
        <div v-for="friend in friends " :key="friend.id" class="friend-card">
          <div class="friend-header">
            <div class="friend-avatar">
              <img :src="friend.avatar" :alt="'Friend '+friend.id">
            </div>
            <h3>{{ friend.name }}</h3>
          </div>
          <p class="friend-description">
            {{ friend.description }}
          </p>
          <RouterLink 
            :to="friend.url" 
            class="friend-link"
          >
            <el-icon><Link /></el-icon>
            <span>访问链接</span>
            <div class="friend-link-bg"></div>
          </RouterLink>
        </div>
      </div>
    </div>

    <!-- 申请对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="友链申请"
      width="30%"
    >
      <el-form :model="applyForm" label-width="80px">
        <el-form-item label="网站头像">
          <el-upload
            class="avatar-uploader"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleAvatarChange"
          >
            <img v-if="applyForm.avatar" :src="applyForm.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="网站名称">
          <el-input v-model="applyForm.name" />
        </el-form-item>
        <el-form-item label="网站链接">
          <el-input v-model="applyForm.url" />
        </el-form-item>
        <el-form-item label="网站描述">
          <el-input v-model="applyForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApply">
            提交申请
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Link, CopyDocument, View, Star, Plus} from '@element-plus/icons-vue'
import HomeHeader from '@/components/home-header.vue'


// 友链数据
const friends = ref([
  {
    id: 1,
    name: "兴平",
    url:'https://crazyyuchi.github.io/friends/',
    description: "人生最大的乐趣，在于答案没有正式揭晓前，什么都是可能的。",
    avatar: "https://pic.rmb.bdstatic.com/bjh/23106a776531a4215a875d6858dce7cd.png"
  },
  {
    id: 2,
    name: "Fomalhaut🥝",
    url:'https://www.fomal.cc/',
    description: "Future is now 🍭🍭🍭",
    avatar: "https://cdn.jsdelivr.net/npm/serms-assets@1.0.16/imgs/avatar.jpg"
  },
  {
    id: 3,
    name: "青松一点",
    url:'https://luokangyuan.com/',
    description: "我不是大佬，只是在追寻大佬的脚步",
    avatar: "https://luokangyuan.com/themes/halo-theme-wik/source/images/photo4.jpg"
  },
  {
    id: 4,
    name: "康",
    description: "康的学习生活日志",
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=4"
  },
  {
    id: 5,
    name: "Zgy Blog",
    description: "[PG打开] 欢迎光临 【时光之隙】 小站站(～￣▽￣)～",
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=5"
  },
  {
    id: 6,
    name: "Ruyu的个人博客",
    description: "一个正在努力变强的萌新",
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=6"
  }
])


// 随机标签类型
const tagTypes = ['', 'success', 'warning', 'info', 'danger']
const getRandomType = () => {
  return tagTypes[Math.floor(Math.random() * tagTypes.length)]
}

// 申请表单相关
const dialogVisible = ref(false)
const applyForm = ref({
  name: '',
  url: '',
  description: '',
  avatar: ''
})

const showApplyDialog = () => {
  dialogVisible.value = true
}

const handleAvatarChange = (file) => {
  const isJPG = file.raw.type === 'image/jpeg'
  const isPNG = file.raw.type === 'image/png'
  const isLt2M = file.raw.size / 1024 / 1024 < 2

  if (!isJPG && !isPNG) {
    ElMessage.error('Avatar picture must be JPG or PNG format!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }

  // 使用 FileReader 读取文件
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    applyForm.value.avatar = reader.result
  }
}

const submitApply = () => {
  // 处理申请逻辑
  dialogVisible.value = false
}
</script>

<style scoped>
.friends-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 10px;
}

.friends-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 56px);
}

/* 顶部信息区域 */
.info-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.info-section h1 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 15px;
}

.blog-info {
  margin-bottom: 15px;
}

.info-item {
  color: #666;
  line-height: 1.8;
  font-size: 14px;
}

.apply-btn {
  float: right;
  margin-top: -80px;
  padding: 8px 16px;
  font-size: 14px;
  background: #409eff;
  border: none;
  border-radius: 4px;
}

/* 友链卡片网格 */
.friends-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 20px;
  row-gap: 50px;
}

.friend-card {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 160px;
  height: 100%;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  row-gap: 50px;
}

.friend-card:hover {
  transform: translateY(-6px);
  animation: shake 1s ease infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@keyframes shake {
  0%, 100% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.friend-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.friend-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.6s ease;
}

.friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* 鼠标悬停时顺时针旋转 */
.friend-card:hover .friend-avatar img {
  transform: rotate(360deg);
}

/* 鼠标离开时逆时针旋转 */
.friend-avatar img {
  transform: rotate(0deg);
}

.friend-header h3 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
  transition: transform 0.3s ease;
  
  &:hover {
    transform: scale(1.2);
    cursor: pointer;
  }
}

.friend-description {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .friends-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    row-gap: 40px;
  }
  
  .friends-content {
    padding: 10px;
  }
  
  .apply-btn {
    float: none;
    margin-top: 10px;
    width: 100%;
  }
}

/* 添加滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.avatar-uploader {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
}

.friend-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  background: linear-gradient(45deg, #409eff, #36cfc9);
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);
  z-index: 1;
}

.friend-link-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #36cfc9, #409eff);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.friend-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.friend-link:hover .friend-link-bg {
  opacity: 1;
}

.friend-link .el-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.friend-link:hover .el-icon {
  transform: rotate(45deg);
}

/* 响应式布局中的样式调整 */
@media screen and (max-width: 768px) {
  .friend-link {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>
